<template>
	<view class="hot-destinations-container">
		<!-- <view class="search-bar">
			<text class="icon-search"></text>
			<input class="search-input" type="text" v-model="searchValue" placeholder="目的地/酒店/关键字" />
			<text class="cancel-btn" @click="handleCancel">取消</text>
		</view> -->
		<search />
		<view class="title">热门目的地</view>
		<text class="tips-text">(更多目的地请在上面输入框内搜索)</text>
		<view class="category-tabs">
			<text class="tab" :class="{ 'active': currentTab === -1 }" @click="handleTabChange(-1)">热门</text>
			<text v-for="(tab, index) in categoryTabs" :key="index" class="tab"
				:class="{ 'active': currentTab === index }" @click="handleTabChange(index)">{{ tab }}
			</text>
		</view>
		<view class="destinations-list">
			<view v-for="(dest, index) in destinationsMap" :key="index" class="dest-item"
				@click="handleDestClick(dest)">
				{{ dest.name }}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { getInitialData } from '@/api/home'
	import search from './components/search.vue';
	const query = defineProps<{
		type : string,
		params : string
	}>()
	const categoryTabs = ref([]);
	const currentTab = ref(-1);
	const destinationsMap = ref([]);
	const regionalDestinations = ref([])
	const destinationsId = ref(null)
	onShow(() => {
		initData()
	})
	const initData = async () => {
		const res = await getInitialData()
		console.log(res)
		regionalDestinations.value = res.data.regionalDestinations
		categoryTabs.value = res.data.regionalDestinations.map((item : any) => item.regionName)
		
		// 处理热门选项卡的数据
		if (currentTab.value === -1) {
			// 热门选项卡显示所有区域的前几个热门目的地
			destinationsMap.value = res.data.hotDestinations;
		} else {
			destinationsMap.value = res.data.regionalDestinations[currentTab.value].destinations;
		}
		console.log(destinationsMap.value)
	}

	const handleCancel = () => {
		searchValue.value = '';
		uni.showToast({
			title: '取消搜索',
			icon: 'none'
		});
	};

	const handleTabChange = (index : number) => {
		currentTab.value = index;
		if (index === -1) {
			// 热门选项卡显示所有区域的前几个热门目的地
			const hotDestinations = [];
			regionalDestinations.value.forEach(region => {
				// 从每个区域取前2个目的地作为热门
				const topDestinations = region.destinations.slice(0, 2);
				hotDestinations.push(...topDestinations);
			});
			destinationsMap.value = hotDestinations;
		} else {
			destinationsMap.value = regionalDestinations.value[currentTab.value].destinations;
		}
	};
	const handleDestClick = (dest : any) => {
		destinationsId.value = dest.id
		const Params = uni.getStorageSync('homeParams')
		uni.setStorageSync('homeParams', {
			...Params,
			destinationId: destinationsId.value,
			destinationsName: dest.name
		})
		if (query.type) {
			const params = JSON.parse(query.params)
			params.destinationId = dest.id
			params.destinationsName = dest.name
			console.log(params)
			uni.navigateTo({
				url: '/pages/hotel/list?params=' + JSON.stringify(params)
			})
		} else {
			uni.switchTab({
				url: '/pages/home/index'
			})
		}


	};
</script>

<style scoped lang="scss">
	.hot-destinations-container {
		padding: 20rpx;
		background-color: #fff;
	}

	.search-bar {
		display: flex;
		align-items: center;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		padding: 0 15rpx;
		margin-bottom: 20rpx;
	}

	.search-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
	}

	.cancel-btn {
		font-size: 28rpx;
		color: #007aff;
		margin-left: 10rpx;
	}

	.category-tabs {
		width: 100%;
		display: flex;
		margin-bottom: 20rpx;
		border-bottom: 3rpx solid #f7f8fa;
	}

	.tab {
		text-align: center;
		font-size: 28rpx;
		padding: 15rpx 25rpx;
	}

	.tab.active {
		// padding-bottom: 6rpx;
		color: #007aff;
		border-bottom: 6rpx solid #007aff;
		transition: all 0.4s;
	}

	.tips-text {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
		display: block;
	}

	.destinations-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: 10px;
		row-gap: 10px;
	}

	.dest-item {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #f0f0f0;
		border-radius: 8rpx;
		font-size: 28rpx;


		&.active {
			border: 1px solid #007aff;
			color: #007aff;
		}
	}
</style>